<template>
  <div>
    <el-dialog
      width="700px"
      :title="$t('sku费用承担/sku费用承担人')"
      destroy-on-close
      append-to-body
      :visible.sync="show"
      :before-close="cancel">
      <el-table :height="calTableHeight() - 100" ref="mianRef" v-loading="loading" :data="tableData">
        <el-table-column show-overflow-tooltip label="sku" width="150" align="center" prop="skuNo" />

        <el-table-column show-overflow-tooltip label="sku承担方" align="center" prop="undertakeDistrType">
          <template slot-scope="{ row }">
            <!-- undertakeDistrType	承担方 1-平台 2-供应商 3-卖家   -->
            <span v-if="row.undertakeDistrType == 1" :style="{ color: $randomColor(row.undertakeDistrType) }">
              平台
            </span>
            <span v-if="row.undertakeDistrType == 2" :style="{ color: $randomColor(row.undertakeDistrType) }">
              供应商
            </span>
            <span v-if="row.undertakeDistrType == 3" :style="{ color: $randomColor(row.undertakeDistrType) }">
              卖家
            </span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="sku承担人" align="center" prop="undertakeDistrName">
          <template slot-scope="{ row }">
            <span>{{ row.undertakeDistrName || '无' }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  activated() {
    this.$nextTick(() => this.$refs['mianRef']?.doLayout())
  },
  props: {
    /**
     * formData
     */
    formData: {
      type: Object,
      default: {},
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      tableData: [],
      // 遮罩层
      loading: false,
      total: 0,
    }
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.tableData = this.formData.undertakeDistrNameList
      }
    },
  },
  methods: {
    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss"></style>
